<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleAddWindow(0)">
        新增模块
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      size="mini"
      row-key="Id"
      highlight-current-row
      style="width: 100%"
      :tree-props="{children: 'Children', hasChildren: true}"
    >
      <el-table-column align="left" label="ID" width="160">
        <template slot-scope="{row}">
          <span>{{ row.Id }}</span>
        </template>
      </el-table-column>
      <el-table-column width="160px" align="left" label="类型">
        <template slot-scope="{row}">
          <span v-if="row.ModuleType === 1">图片</span>
          <span v-if="row.ModuleType === 2">内容</span>
        </template>
      </el-table-column>
      <el-table-column width="200px" align="left" label="标题">
        <template slot-scope="{row}">
          <span>{{ row.Title }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="left" label="标识">
        <template slot-scope="{row}">
          <span>{{ row.Sign }}</span>
        </template>
      </el-table-column>
      <el-table-column width="360px" align="left" label="描述">
        <template slot-scope="{row}">
          <span>{{ row.Mark }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="left" label="状态" width="120">
        <template slot-scope="{row}">
          <i class="el-icon-check" style="color: green" v-if="row.Status"></i>
          <i class="el-icon-close" style="color: red" v-if="!row.Status"></i>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="handleAddWindow(row.Id)"
          >
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="handleDel(row.Id)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { systemModuleList, systemModuleAdd, systemModuleDetail, systemModuleDel } from '@/api/system'
import waves from '@/directive/waves'
import { strLength } from '@/utils/common'

export default {
  name: 'SystemModuleList',
  components: { },
  directives: { waves },
  data() {
    const checkTitle = function(rule, value, callback) {
      if (!value) {
        return callback(new Error('对不起， 名称不能为空!'))
      }

      const strLen = strLength(value)
      if (strLen > 24 || strLen < 6) {
        return callback(new Error('对不起， 用户名长度为6-24个字符,汉字为3个字符!'))
      }

      const reg = /^[A-Za-z0-9\u4e00-\u9fa5]+$/
      if (!reg.test(value)) {
        callback(new Error('对不起, 用户名只能包含汉字,数字,字母'))
      } else {
        callback()
      }
    }
    const checkSign = function(rule, value, callback) {
      if (!value) {
        return callback(new Error('对不起， 配置标识不能为空!'))
      }

      const strLen = strLength(value)
      if (strLen > 24 || strLen < 4) {
        return callback(new Error('对不起， 配置标识为4-24个字符!'))
      }

      const reg = /^[A-Za-z0-9_]+$/
      if (!reg.test(value)) {
        callback(new Error('对不起, 用户名只能包含数字,字母,下划线'))
      } else {
        callback()
      }
    }
    return {
      list: [],
      listLoading: true,
      listQuery: {
        page_index: 1,
        page_size: 10
      },
      dialogAddFormVisible: false,
      typeOption: [],
      editTitle: '添加菜单',
      addData: {
        id: '0',
        title: '',
        module_type: 1,
        sign: '',
        image_list: '',
        link_list: '',
        node_list: '',
        start_time: '',
        end_time: '',
        mark: ''
      },
      rules: {
        id: [],
        title: [
          { required: true, message: '需要填写配置标题', trigger: 'blur' },
          { validator: checkTitle.bind(this), message: '需要填写配置标题', trigger: 'blur' }
        ],
        module_type: [
          { required: true, message: '需要选择类型', trigger: 'blur' }
        ],
        sign: [
          { required: true, message: '需要填写标识', trigger: 'blur' },
          { validator: checkSign, trigger: 'blur' }
        ],
        mark: [
          { required: true, message: '需要填写备注', trigger: 'blur' }
        ],
        image_list: [
          { required: true, message: '需要选择图片', trigger: 'blur' }
        ],
        link_list: [
          { required: true, message: '需要填写链接', trigger: 'blur' }
        ],
        start_time: [
          { required: true, message: '需要选择开始时间', trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: '需要选择结束时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.editTitle = '添加配置'
  },
  methods: {
    resetAddData() {
      this.addData = {
        id: '0',
        title: '',
        module_type: 1,
        sign: '',
        image_list: '',
        link_list: '',
        node_list: '',
        start_time: '',
        end_time: '',
        mark: ''
      }
    },
    getList() {
      this.listLoading = true
      systemModuleList(this.listQuery).then(response => {
        if (response.success) {
          this.list = response.data.data
          this.module_type = response.module_type
          this.listLoading = false
        } else {
          this.$message({
            type: 'error',
            message: '获取数据列表失败!'
          })
        }
      })
    },
    handleAddWindow(id) {
      this.$router.push({ path: '/admin/modules/add/' + id })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除选此模块, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        systemModuleDel(id).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        }).catch(err => {
          this.$message({
            type: 'success',
            message: err
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    resetQueryForm(formName) {
      this.$refs[formName].resetFields()
      this.editTitle = '添加配置'
      this.resetAddData()
    }
  }
}
</script>
